<script setup lang="ts">
const props = defineProps({
  title: String,
  icon: String,
  id: Number,
})
</script>

<template>
  <van-cell
    size="large"
    clickable
    :key="props.id"
    @click="$router.push({ name: 'contactDetail', params: { id: props.id } })"
  >
    <template #title>
      <span style="font-size: 18px; line-height: 48px">{{ props.title }}</span>
    </template>
    <template #icon>
      <van-image
        width="48px"
        height="48px"
        radius="10%"
        fit="fill"
        style="margin-right: 16px"
        :src="props.icon"
      />
    </template>
    <template #label> </template>
  </van-cell>
</template>

<style scoped>
.van-cell::after {
  content: '';
  display: block;
  margin-left: 64px;
  border-bottom: 1px solid var(--van-gray-4);
}
</style>
